<template>
    <!--  播放盒子 -->
    <div class="music_now overHidden">
        <img :src="this.musiclist[this.currentIndex].sing_img" @click="showplayer">
        <span class="music_text">
            <p class="m_name" id="music_name" ref="song" @mouseenter="m_name()" @mouseleave="m_lname()"  v-text="musiclist[this.currentIndex].sing_name"></p>
            <p class="m_singer" ref="singer" @mouseenter="m_singer()" @mouseleave="m_lsinger()" v-text="this.musiclist[this.currentIndex].singer"></p>
        </span>
    </div>
</template>

<script>
export default {
    data() {
        return {
            music_now: this.musiclist[this.currentIndex],
            intervalId:null,
        }
    },
    methods: {
        m_name(){ // 歌曲名称跑马灯效果
            if(this.intervalId == null ){
                this.intervalId = setInterval(()=>{
                    var s = this.music_now.sing_name.substring(0,1);
                        var e = this.music_now.sing_name.substring(1);
                        this.music_now.sing_name = e + s;
                        this.$refs.song.values = this.music_now.sing_name;
                    },800);        
            }
        },
        m_lname(){
            clearInterval(this.intervalId);
            this.intervalId = null;
        },
        m_singer(){ // 歌曲名称跑马灯效果
            if(this.intervalId == null){
                this.intervalId = setInterval(()=>{
                    var s = this.music_now.singer.substring(0,1);
                        var e = this.music_now.singer.substring(1);
                        this.music_now.singer = e + s;
                        this.$refs.singer.values = this.music_now.singer;
                    },800);        
            }
        },
        m_lsinger(){
            clearInterval(this.intervalId);
            this.intervalId = null;
        },
        showplayer(){  // 显示播放的歌曲信息页面
            this.$emit('showplayer')
        }
    },
    props: ['musiclist', 'currentIndex'],
}
</script>

<style>
/* 播放盒子 */
.music_now{ width:290px; }
.music_now img{ float:left; width: 68px; height: 68px; cursor: pointer; }
.music_text{float:left; height: 68px; width:160px; }
.m_name{ line-height: 16px; color: white; height:16px; margin-left: 10px; margin-top:6px; font-size: 14px; cursor: pointer; overflow: hidden; }
.m_singer{ line-height: 16px; color: white; margin-left: 10px; margin-top:26px; font-size: 14px; cursor: pointer; overflow: hidden; }
</style>